<!doctype html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <button id="capture-button">Capture</button>
    <button id="record-button">Record</button>
    <br>
    <video id="result-video" autoplay></video>
    <img id="result-image">
    <script src="src/index.js"></script>
    <script src="bower_components/whammy/whammy.js"></script>
    <script>
      function showImage(img) {
        document.querySelector('#result-image').src = img;
      }
      function showVideo(blob) {
        document.querySelector('#result-video').src = URL.createObjectURL(blob);
      }
      document.querySelector('#capture-button').onclick = function () {
        JSCapture.capture({
          done: showImage,
          fail: function () {
            alert('Error, while capturing your screen');
          },
          x: 10,
          y: 100,
          width: 800,
          height: 400,
          scale: 1.5
        });
      };
      document.querySelector('#record-button').onclick = function () {
        JSCapture.record({
          done: showVideo,
          fail: function () {
            alert('Error, while recording your screen');
          },
          duration: 10000,
          scale: 0.5
        });
      };
    </script>
  </body>
</html>